<template>
  <div class="card-box admin-card-box">
    <div class="user-box-title" :style="back">
      <mu-avatar slot="avatar">
        <img :src="userinfo.userhead || defaultHead"/>
      </mu-avatar>
      <p>{{userinfo.username}}</p>
      <p>{{userinfo.mobile}}</p>
      <p class="sx-btn">
        <span @click="newcard">新建</span>
        <span @click="openBotttomSheet">筛选</span>
      </p>
    </div>

    <div class="c-list-box List">
      <div class="bdcard">
        <input maxlength="10" type="number" placeholder="请输入卡号" class="bd-input" v-model="cardno"/>
      </div>
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
        <mu-list>
          <div class="sing-card" v-for="(item,index) in cardList" :key="index">
            <mu-expansion-panel :expand="panel === index" @change="toggle(index)">
              <div slot="header" class="card-title" :style="cardback">
                <div class="idr">IDR</div>
                <span class="card-id">{{item.cardNo}}</span>
                <span class="fright card-money">¥{{item.sum||'0'}}</span>
                <span class="card-money" style="padding-left: 20px">{{item.state}}</span>
              </div>
              <ul class="card-info">
                <li>
                  <span class="fleft">用户名</span>

                  <span class="fright">{{item.userName || '未绑定'}}</span>

                  <div class="_clear"></div>
                </li>
                <li>
                  <span class="fleft">电话</span>
                  <span class="fright">{{item.mobile||'无'}}</span>
                  <div class="_clear"></div>
                </li>
                <li>
                  <span class="fleft">状态</span>

                  <span class="fright">{{item.state}}</span>

                  <div class="_clear"></div>
                </li>
                <li class="hardle">
                  <span class="hardle-text" @click="lossCard(item.cardNo,item.state)"
                        :style="item.state | lose">挂失</span>
                  <span class="hardle-text" @click="editCard(item.cardNo,item.sum,item.mobile,item.state)"
                        :style="item.state | lose">编辑</span>
                  <span class="hardle-text" @click="cardinvest(item.cardNo)">充值记录</span>

                  <span class="hardle-text" @click="carduse(item.cardNo)">使用记录</span>
                </li>
              </ul>
            </mu-expansion-panel>
          </div>
        </mu-list>
      </mu-load-more>
      <div v-show="nolist" class="nolist">
        <span class="iconfont icon-charging"></span>
        <p>暂无卡片</p>
      </div>
    </div>

    <mu-bottom-sheet :open.sync="open" class="card-choose">
      <mu-form :model="form" label-width="100">
        <mu-list>
          <span class="iconfont icon-xialajiantou" @click="open=false"></span>

          <mu-list-item>
            <mu-form-item prop="radio" label="状态">
              <mu-radio v-model="form.radio" value="6001" label="正常"></mu-radio>
              <mu-radio v-model="form.radio" value="6002" label="已挂失"></mu-radio>
              <mu-radio v-model="form.radio" value="6003" label="未启用"></mu-radio>
            </mu-form-item>
          </mu-list-item>
          <mu-list-item>
            <mu-button class="btn big-btn" @click="checkCard">确定</mu-button>
          </mu-list-item>
        </mu-list>
      </mu-form>
    </mu-bottom-sheet>
    <mu-bottom-sheet :open.sync="newcardshow" class="card-choose newcard-box">
      <mu-form :model="form" label-width="100">
        <span class="iconfont icon-xialajiantou" @click="newcardshow=false"></span>
        <p class="title">添加卡</p>
        <mu-list>
          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">卡编</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="请输入卡号"
                maxlength="10"
                icon="comment"
                v-model="adddata.cardNo"
              />
            </div>
          </mu-list-item>

          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">电话</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="请输入号码"
                icon="comment"
                maxlength="11"
                v-model="adddata.mobile"
              />
            </div>
          </mu-list-item>

          <mu-list-item>
            <mu-button class="btn big-btn" @click="addCard">确定</mu-button>
          </mu-list-item>
        </mu-list>
      </mu-form>
    </mu-bottom-sheet>

    <mu-bottom-sheet :open.sync="editcardshow" class="card-choose newcard-box">
      <mu-form :model="form" label-width="100">
        <span class="iconfont icon-xialajiantou" @click="editcardshow=false"></span>
        <p class="title">编辑卡</p>
        <mu-list>
          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">电话</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="请输入号码"
                icon="comment"
                maxlength="11"
                v-model="editcard.mobile"
              />
            </div>
          </mu-list-item>

          <mu-list-item>
            <mu-button class="btn big-btn" @click="editCard2">确定</mu-button>
          </mu-list-item>
        </mu-list>
      </mu-form>
    </mu-bottom-sheet>
  </div>
</template>

<script>
    import {Toast} from "vant";
    import "vant/lib/toast/style/index";
    import head from '@/assets/image/timg.jpg'

    export default {
        data() {
            return {
                defaultHead: head,
                losestyle: '',
                userinfo: {
                    userhead: this.$store.state.adminuserinfo.headImage,
                    username: this.$store.state.adminuserinfo.userName,
                    mobile: this.$store.state.adminuserinfo.mobile
                },
                newcardshow: false,
                editcardshow: false,
                open: false,
                cardno: "",
                panel: "",
                adddata: {
                    cardNo: "",
                    mobile: ""
                },
                editcard: {
                    mobile: ""
                },
                form: {
                    radio: ""
                },
                back: {
                    background:
                        "url(" + require("../../../assets/image/minebackimg.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                cardback: {
                    background:
                        "url(" + require("../../../assets/image/cardbimg.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },

                cardList: [],
                num: 8,
                nolist: true,
                loaded_all: false,
                refreshing: false,
                loading: false
            };
        },
        methods: {
            toggle(panel) {
                this.panel = panel === this.panel ? "" : panel;
            },
            checkCard() {
                // console.log(this.form.radio);
                this.getList({pageNo: 1, pageSize: this.num, state: this.form.radio});
                this.open = false;
            },
            addCard() {
                if (this.adddata.cardNo == '') {
                    Toast("卡号不能为空");
                    return;
                }

                if (this.adddata.sum == '') {
                    Toast("余额不能为空");
                    return;
                }
                if (this.adddata.mobile == '') {
                    Toast("手机号不能为空");
                    return;
                }
                if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.adddata.mobile)) {
                    Toast("手机号码有误，请重填");
                    return false;
                }
                this.$api.addCard(this.adddata).then(res => {
                    if (res.data.message.code == 0) {
                        this.open = false;
                        Toast("添加成功");
                        this.getList({pageNo: 1, pageSize: this.num});
                        this.newcardshow = false;
                    } else {
                        Toast(res.data.message.message);
                    }
                });
            },
            editCard(id, sum, moblie, state) {
                if (state == '挂失') {
                    return
                }
                this.editcardshow = true;
                this.editcard.cardNo = id;
                this.editcard.sum = sum;

                this.editcard.mobile = moblie;
            },
            editCard2() {
                if (this.editcard.cardNo == '') {
                    Toast("卡号不能为空");
                    return;
                }
                this.$api
                    .editCard({
                        cardNo: this.editcard.cardNo,
                        sum: this.editcard.sum,
                        mobile: this.editcard.mobile
                    })
                    .then(res => {
                        if (res.data.message.code == 0) {
                            this.editcardshow = false;
                            Toast("修改成功");
                            this.getList({pageNo: 1, pageSize: this.num});
                            this.editcardshow = false;
                        } else {
                            Toast(res.data.message.message);
                        }
                    });
            },
            //充值记录
            cardinvest(cardid) {
                this.$router.push({
                    path: "/admin/cardinvest/" + cardid
                });
            },
            //使用记录
            carduse(cardid) {
                this.$router.push({
                    path: "/admin/carduse/" + cardid
                });
            },
            openBotttomSheet() {
                this.open = true;
            },

            newcard() {
                this.newcardshow = true;
            },
            getList(params) {
                this.$api.getCardList(params).then(res => {
                    if (res.data != "") {

                        if (res.data.message.code == 0) {
                            this.cardList = res.data.data.records;

                            this.nolist = false;
                            if (res.data.data.pages == 1) {
                                Toast("已加载全部数据");
                                this.loaded_all = true;
                            }
                        }
                    } else {
                        this.cardList = [];
                        Toast("暂无卡片");
                    }
                });
            },
            lossCard(id, state) {
                if (state == '挂失') {
                    return
                }
                this.$confirm('确定要挂失此卡？', '', {}).then(({result}) => {
                    if (result) {
                        this.$api.lossCard(id).then(res => {
                            console.log(res);
                            if (res.data.message.code == 0) {
                                Toast("挂失成功");
                                this.getList({pageNo: 1, pageSize: this.num});
                            }
                        });
                    } else {
                        Toast("取消挂失");
                    }
                });

            },
            refresh() {
                this.refreshing = true;
                this.$refs.container.scrollTop = 0;
                setTimeout(() => {
                    this.refreshing = false;
                    this.getList({pageNo: 1, pageSize: 5});
                }, 2000);
            },
            load() {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.num += 3;
                    if (this.form.radio != "") {
                        this.getList({
                            pageNo: 1,
                            pageSize: this.num,
                            state: this.form.radio
                        });
                    } else {
                        this.getList({pageNo: 1, pageSize: this.num});
                    }
                }, 2000);
            }
        },
        mounted() {
            this.getList({pageNo: 1, pageSize: this.num});
        },
        watch: {
            cardno: function (cardno) {
                if (cardno == "") {
                    this.getList({pageNo: 1, pageSize: this.num});
                } else {
                    this.getList({pageNo: 1, pageSize: this.num, cardNo: cardno});
                }
            },
            cardList: function (v) {
                if (v == "") {
                    this.nolist = true;
                } else {
                    this.nolist = false;
                }
            }
        },
        filters: {
            lose: function (v) {
                if (v == '挂失') {
                    return "color:#d8d8d8"
                }
            }
        }
    };
</script>

<style>

</style>
